{# templates/form/custom_types.html.twig #}

{% block params_field_row %}
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            {% for key,_params in params %}
                <li {% if loop.index == 1 %}class="active"{% endif %}>
                    <a href="#tab_{{ loop.index }}" data-toggle="tab" aria-expanded="true">
                        {% if _params|length > 0 %}
                            <code>{{ key|capitalize }}</code>
                        {% else %}
                            {{ key|capitalize }}
                        {% endif %}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for key,_params in params %}
                <div class="tab-pane {% if loop.index == 1 %}active{% endif %}" id="tab_{{ loop.index }}">
                    <div class="params_field_row_{{ key }}_widget">
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <th width="25%">Key</th>
                                <th width="40%">Description</th>
                                <th style="width: 35px;">Format</th>
                                <th style="width: 10px;">Required</th>
                                <th style="width: 10px">Action</th>
                            </tr>
                            {% for param in _params %}
                                <tr>
                                    <td><input type="text" name="params_data[{{ key }}][{{ loop.index }}][key]" class="form-control" value="{{ param.key }}"></td>
                                    <td><input type="text" name="params_data[{{ key }}][{{ loop.index }}][description]" class="form-control" value="{{ param.description }}"></td>
                                    <td>
                                        <select name="params_data[{{ key }}][{{ loop.index }}][format]" class="form-control">
                                            {% for format in formats %}
                                                <option value="{{ loop.index }}" {% if loop.index == param.format %} selected {% endif %}>{{ format }}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td><input type="checkbox" name="params_data[{{ key }}][{{ loop.index }}][required]" {% if param.required %} checked {% endif %} class="form-control params_field_row_checkbox" value="true"></td>
                                    <td><button type="button" class="btn-sm btn-block btn-default btn-flat"onclick="$(this).parents('tr').remove();"><span class="glyphicon glyphicon-trash box-tools"></span></button></td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td><input type="text" name="params_data[{{ key }}][0][key]" class="form-control" value=""></td>
                                    <td><input type="text" name="params_data[{{ key }}][0][description]" class="form-control" value=""></td>
                                    <td>
                                        <select class="form-control" name="params_data[{{ key }}][0][format]">
                                            {% for format in formats %}
                                                <option value="{{ loop.index }}">{{ format }}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td><input type="checkbox" name="params_data[{{ key }}][0][required]" class="form-control params_field_row_checkbox" value="true"></td>
                                    <td><button type="button" class="btn-sm btn-block btn-default btn-flat" onclick="$(this).parents('tr').remove();"><span class="glyphicon glyphicon-trash box-tools"></span></button></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-block btn-default btn-flat" onclick="addParamsFieldRow{{ key|capitalize }}Item()" name="btn_update_and_edit"><i class="fa fa-plus" aria-hidden="true"></i> 添加字段 </button>
                    </div>
                    <script>
                        let item_{{ key }} = {{ _params|length }};
                        function addParamsFieldRow{{ key|capitalize }}Item() {
                            item_{{ key }}++;
                            $(".params_field_row_{{ key }}_widget table tbody").append('<tr>' +
                                '<td><input type="text" name="params_data[{{ key }}][' + item_{{ key }} + '][key]" class="form-control" value=""></td>' +
                                '<td><input type="text" name="params_data[{{ key }}][' + item_{{ key }} + '][description]" class="form-control" value=""></td>' +
                                '<td><select class="form-control" name="params_data[{{ key }}][' + item_{{ key }} + '][format]">{% for format in formats %}<option value="{{ loop.index }}">{{ format }}</option>{% endfor %}</select></td>' +
                                '<td><input type="checkbox" name="params_data[{{ key }}][' + item_{{ key }} + '][required]" class="form-control params_field_row_checkbox" value="true"></td>' +
                                '<td><button type="button" class="btn-sm btn-block btn-default btn-flat"onclick="$(this).parents(\'tr\').remove();"><span class="glyphicon glyphicon-trash box-tools"></span></button></td>' +
                                '</tr>');
                            $('input.params_field_row_checkbox').iCheck({
                                checkboxClass: 'icheckbox_square-blue',
                            });
                        }
                    </script>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{# ... here you will add the Twig code ... #}